@font-face {
  font-family: 'Borna-medium';
  src: url(./fonts/Borna/borna-medium-webfont.woff2) format('woff2'), /* Modern Browsers */
      url(./fonts/Borna/borna-medium-webfont.woff) format('woff'); /* Older Browsers */
  /* Optionally, you can specify font-weight and font-style */
  font-weight: 500;
  font-style: medium;
}  

@font-face {
font-family: 'Borna-regular';
src: url(./fonts/Borna/borna-regular-webfont.woff2) format('woff2'), /* Modern Browsers */
      url(./fonts/Borna/borna-regular-webfont.woff) format('woff'); /* Older Browsers */
/* Optionally, you can specify font-weight and font-style */
font-weight: 500;
font-style: medium;
}

@font-face {
font-family: 'Sentient-italic';
src: url(./fonts/Sentient/Sentient-Italic.woff2) format('woff2'), /* Modern Browsers */
      url(./fonts/Sentient/Sentient-Italic.woff) format('woff'); /* Older Browsers */
/* Optionally, you can specify font-weight and font-style */
font-weight: 400;
font-style: italic;
}

@font-face {
  font-family: 'Sentient';
  src: url(./fonts/Sentient/Sentient-Regular.woff2) format('woff2'), /* Modern Browsers */
          url(./fonts/Sentient/Sentient-Regular.woff) format('woff'); /* Older Browsers */
  /* Optionally, you can specify font-weight and font-style */
  font-weight: 400;
  font-style: regular;
  }

  @font-face {
    font-family: 'Sentient-LightItalic';
    src: url(/fonts/Sentient/Sentient-LightItalic.woff2) format('woff2'), /* Modern Browsers */
            url(/fonts/Sentient/Sentient-LightItalic.woff) format('woff'); /* Older Browsers */
    /* Optionally, you can specify font-weight and font-style */
    font-weight: regular;
    font-style: regular;
    }




  .phoneNumber{
    font-family: 'Sentient', serif;
  }

 /* Elimina el cursor predeterminado en toda la web */






/* NAVBAR */

.navbar{
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  width: 100vw;
  background-color: #F9F9F9;
  padding-top: 0px;
  padding-bottom: 0px;
  position: fixed;
  top: 0;
  z-index: 1000;
  
}

.barraMenu{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100vw;
  align-items: center;
}

.itemsNav{
  font-family: 'Borna-medium', sans-serif;
  display: flex;
  flex-direction: row;
  gap: 40px;
  font-size: 12px;
}

.nav-link:hover{
  color: #172BE0;
}

/* FOOTER */

.footer{
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  justify-content: space-between;
  width: 100vw;
  background-color: #F9F9F9;
  padding-top: 5px;
  padding-bottom: 5px;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 1000;

}

.barraFooter{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100vw;
  align-items: center;
}

.itemsFooter, .DesktopLink, .emailMe {
  font-family: 'Borna-medium', sans-serif;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  font-size: 11px;
  text-decoration: none;
  color: #1E1E1E;
}

.emailMe:hover{
  color: #FE5B00;
}

.DesktopLink:hover{
  color: #FE5B00;
}












/* IMAGEN */
.hello {
  font-family: 'Borna-medium', sans;
  font-size: 120px;
  color: #F9F9F9;
  padding-bottom: 0px;
  margin-bottom: 0px;

}

h4{
  font-family: 'Sentient-LightItalic', serif;
  font-size: 40px;
  margin-top: -20px;
  margin-bottom: 60px;
  letter-spacing: -1px;
  width: 100%;
  color: #F9F9F9;

}

h5{
  font-family: 'Borna-medium', sans;
  font-size: 18px;
  color: #F9F9F9;
  
}

.emailUp{
  font-family: 'Borna-medium', sans;
  font-size: 14px;
  color: #F9F9F9;
  text-decoration: none;
}

.emailUp:hover{
  opacity: 50%;
}

.titulares{
  display: flex;
  flex-direction: column;
  justify-content:end;
  height: 100vh;
  padding-left: 20px;
}

.columnaDerecha{
  padding-top: 90px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 
}

.redes{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 50px;
  padding-right: 30px;
}

.follow{
  display: flex;
  flex-direction: column;

}

.doodle{
  padding-right: 20px;
}

p {
  font-family: 'Sentient-regular', serif;
  width: 50%;
  font-size: 16px;
  line-height: 105%;
  margin-bottom: 0px;
  padding-bottom: 45px;
}

.enlacescontact{
  text-decoration: underline;
  color: #1E1E1E;
}

.contenido {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  height: 100vh;
  width: 100vw;
  background: rgb(23, 43, 224); /* Color azul oscuro inicial */
  position: relative;
  overflow: hidden; /* Asegura que no se salga nada del contenedor */
  transition: background 0s ease-out; /* Suaviza el cambio al color inicial */
}

.contenido.gradient {
  background: radial-gradient(circle at 20% 20%, rgba(128, 133, 253, 0.8) 10px, rgba(23, 43, 224, 1) 10px);
}

.imagenContacto{
 height: 100vh;
}

.ladoTexto{
  padding-left: 120px;
  padding-top: 150px;
  position: relative;
}


.ladoImagen{
  position: relative;
}

.asteriscodoodle, .doodle, .smile, .egeblue, .asteriscoOr{
  position:absolute;
  
}

.asteriscodoodle{
  bottom: 75px;
  right: 30px;
}

.doodle{
  bottom: 75px;
  right: 20px;
}

.smile{
  bottom: 70px;
  left: 70px;
}

.egeblue{
  bottom: 250px;
  left: 500px;
}

.asteriscoOr{
  top: 150px;
  left: 65px;
}




.iconos{
  display: flex;
  flex-direction: row;
  gap: 50px;
  align-items: center;

}


@media (min-width: 10px) and (max-width: 375px){
  /* NAV */
  .itemsNav {
   display: none;
   flex-direction: column;
   position: absolute;
   top: 40px;
   right: 0;
   background-color: #F9F9F9; /* Optional: background color */
   width: 100%;
   text-align: center;
   gap: 20px;
   padding: 10px 0;
}

.menu-toggle {
   display: block;
   background: none;
   border: none;
   font-size: 24px;
   cursor: pointer;
}

.barraMenu {
   width: 100%;
   justify-content: space-between;
}


.contenidoTodo{
 display: flex;
 flex-direction: column;
 padding: 130px 10px 70px 10px;
}

.columnaImagenes{
 padding-left: 0%;
 overflow-y: auto; 
 columns: 12;
 
}

.half-width, .full-width, .third-width {
 grid-column: span 6;
}

.imagenProyecto {
overflow: hidden;
height: 300px;
border-radius: 5px;

}

.image-grid {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 10px;
padding: 50px 10px 10px;

flex-grow: 1; /* Allow this column to grow to fill the remaining space */
overflow-y: auto; /* Enable vertical scrolling */
/* Optionally, you can add styling such as background color */
}

.emailMe{
display: none;
}

.navbar{
padding-left: 0px;
padding-right: 10px;
}

.itemsNav{
font-size: 12px;
}

.EstrellaGraciaLogo{
scale: 1;
padding-left: 20px;
}

.footer{
padding-left: 20px;
padding-right: 20px;
}

.DesktopLink{
font-size: 12px;
}

/* CONTACT */
.contenido{
  flex-direction: column;
}

.titulares{
  order: 1;
}

.hello{
  font-size: 50px;
}

h4{
  font-size: 20px;
  margin-top: -5px;
  letter-spacing: -0.5px;
}

.columnaDerecha{
  width: 100vw;
  align-items: end;
}

.redes{
 gap: 20px;
 left: 40vw;
 flex-direction: column;
}

.emailUp{
  font-size: 10px;
}

h5{
  font-size: 12px;
  margin-bottom: 0px;
}

.doodle{
  scale: 0.5;
  position: inherit;

}



}



@media (min-width: 376px) and (max-width: 576px){
/* Estilos para dispositivos móviles pequeños */
 
   /* NAV */
   .itemsNav {
     display: none;
     flex-direction: column;
     position: absolute;
     top: 40px;
     right: 0;
     background-color: #F9F9F9; /* Optional: background color */
     width: 100%;
     text-align: center;
     gap: 20px;
     padding: 10px 0;
 }

 .menu-toggle {
     display: block;
     background: none;
     border: none;
     font-size: 24px;
     cursor: pointer;
 }

 .barraMenu {
     width: 100%;
     justify-content: space-between;
 }


 .contenidoTodo{
   display: flex;
   flex-direction: column;
   padding: 130px 20px 70px 20px;
 }

 .columnaImagenes{
   padding-left: 0%;
   overflow-y: auto; 
   columns: 12;
   
 }

 .half-width, .full-width, .third-width {
   grid-column: span 6;
}

.imagenProyecto {
 overflow: hidden;
 height: 300px;
 border-radius: 5px;

}

.image-grid {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 10px;
 margin-bottom: 25px;
 padding-top: 50px;
 flex-grow: 1; /* Allow this column to grow to fill the remaining space */
 overflow-y: auto; /* Enable vertical scrolling */
 /* Optionally, you can add styling such as background color */
}

.emailMe{
 display: none;
}

.navbar{
 padding-left: 0px;
 padding-right: 5px;
}

.itemsNav{
 font-size: 12px;
}

.EstrellaGraciaLogo{
 scale: 1;
 padding-left: 20px;
}

.footer{
 padding-left: 20px;
 padding-right: 20px;
}

.DesktopLink{
 font-size: 12px;
}

.contenido{
  flex-direction: column;
}

.titulares{
  order: 1;
}

.hello{
  font-size: 50px;
}

h4{
  font-size: 20px;
  margin-top: -5px;
  letter-spacing: -0.5px;
}

.columnaDerecha{
  width: 100vw;
  align-items: end;
}

.redes{
 gap: 20px;
 left: 40vw;
 flex-direction: column;
}

.emailUp{
  font-size: 12px;
}

h5{
  font-size: 14px;
  margin-bottom: 0px;
}

.doodle{
  scale: 0.5;
  position: inherit;
}






}




@media (min-width: 577px) and (max-width: 768px){
  .image-grid {
      grid-template-columns: 1fr 1fr;
  }

  .full-width {
      grid-column: span 2;
  }

  .half-width {
      grid-column: span 1;
  }

  .menu-toggle {
      display: none;
    }


    /* copiado de antes revisar */
    .itemsNav {
      display: none;
      flex-direction: column;
      position: absolute;
      top: 40px;
      right: 0;
      background-color: #F9F9F9; /* Optional: background color */
      width: 100%;
      text-align: center;
      gap: 20px;
      padding: 10px 0;
  }

  .menu-toggle {
      display: block;
      background: none;
      border: none;
      font-size: 24px;
      cursor: pointer;
  }

  .barraMenu {
      width: 100%;
      justify-content: space-between;
  }


.emailMe{
  display: none;
}

.navbar{
  padding-left: 0px;
  padding-right: 10px;
}

.itemsNav{
  font-size: 12px;
}

.EstrellaGraciaLogo{
  scale: 0.7;
}

.footer{
  padding-left: 20px;
  padding-right: 20px;
}

.DesktopLink{
  font-size: 12px;
}

 .hello {
  line-height: 100%;
  margin-bottom: 20px;
}









  

}

@media (min-width: 769px) and (max-width: 1200px) { 
  /* Estilos para tabletas */
  

.menu-toggle{
  display: none;
}

.hello {
  line-height: 100%;
  margin-bottom: 20px;
}


}

@media (min-width: 1201px) and (max-width: 1920px){
  .image-grid {
    grid-template-columns: 1fr 1fr;
}

.full-width {
    grid-column: span 2;
}

.half-width {
    grid-column: span 1;
}



.menu-toggle {
  display: none;

  }
}